.login {
    width: 100%;
    height: 100%;
    background-color: @mainColor;
    position: relative;
    overflow: hidden;
    .code_left {
        position: absolute;
        top: 0;
        right: 0;
        height: 60px;
        width: 60px;
        overflow: hidden;
        background: url(../images/qr56e927.svg) no-repeat 100% 0;
        cursor: pointer;
        background-size: 100%;
    }
    .admin_left {
        top: 21px;
        position: absolute;
        right: 19px;        
    }
    .code_view {
        width: @size * 2;
        height: @size * 2;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
    .send-button {
     float: right;
     position: relative;
     top: -@size * .4;
     z-index: 2;
    }
    .bg {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        // filter: brightness(.4);
        &.blur {
            img {
                filter: blur(50px);
            }
        }
        &.in {
            img {
                transform: scale(1.5);
            }
        }
        img {
            width: 130%;
            opacity: .7;
            transition: 500ms;
        }
    }
    .logo {
        top: 0;
        left: @size * .7;
        width: @size * 2;
        height: @size;
        background-image: url(../images/logo.png);
        background-size: 180px auto;
        background-repeat: no-repeat;
        background-position: center center;
        z-index: 1;
        position: absolute;
    }
    .form {
        right: @size * 2;
        width: @size * 3.5;
        padding: @space * 2 @space * 4;
        border-radius: 0;
        box-shadow: 0 0 @space * 2 @bg-dark;
        z-index: 1;
        background-color: @white;
        .center();
        &:before {
            content: '';
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #fff;
            position: absolute;
        }
        .form-bg {
            top: -104px;
            left: -130px;
            max-width: unset;
            z-index: 10;
            position: absolute;
            pointer-events: none;
        }
        .title {
            // color: #2d67ed;
            margin: @space * 6.5 0 @space * 2;
            text-align: center;
            .x-big;
            letter-spacing: 1px;
            color: @mainColor;
            position: relative;
            &:after {
                content: '';
                top: 0;
                left: 0;
                width: @space;
                height: 120%;
                opacity: .5;
                background-color: #fff;
                position: absolute;
                animation: title 3s infinite linear;
                transform: rotate(45deg);
            }
        }
        @keyframes title {
            0% {
                left: 0;
            }
            30% {
                left: 100%;
            }
            100% {
                left: 100%;
            }
        }
        .ivu-input-group {
            height: @size * .4;
        }
        .ivu-input {
            height:  @size * .4;
            padding-right: @space * 2;
            border-left: 0;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border-color: #ddd;
            box-shadow: unset;
            font-size: 14px;
        }
        .ivu-input-group-prepend {
            width: @size * .4;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            font-size: 25px;
            color: #999;
            background-color: @white;
            text-align: center;
            transition: 300ms;
        }
        .ivu-form-item-error .ivu-input {
            border-color: #ed3f14;
        }
        .ivu-form-item-error-tip {
            left: @size * .4;
        }
        .ivu-form-item {
            width: 100%;
            margin-right: 0;
            margin-bottom: @space * 3;
        }
        .btn-submit {
            @color: @mainColor;
            // @color: #b91e22;
            width: 100%;
            border: none;
            height: @size * .4;
            margin-bottom: @space;
            border-radius: 0;
            .x-big;
            letter-spacing: 5px;
            z-index: 1;
            color: #fff;
            background-color: @color;
            outline: none;
            position: relative;
            cursor: pointer;
            &:hover {
                background-color: lighten(@color, 14%);
            }
            &:active {
                background-color: darken(@color, 14%);
            }
        }
        .qrcode {
            width: @size * 2.7;
            .radius(0);
        }
        .qrcode-poptip {
            .ivu-poptip-body-content {
                overflow: visible;
            }
        }
        .code {
            animation: show 1s;
            .ivu-form-item-content {
                .flexBetween();
            }
            .ivu-input-wrapper {
                width: e('calc(100% - 140px)');
            }
            img {
                width: 130px;
                height: @size * .4;
                cursor: pointer;
            }
        }
        @keyframes show {
            0% {
                opacity: 0;
                height: 0;
                margin-bottom: 0;
            }
            100% {
                opacity: 1;
                height: 40px;
                margin-bottom: 30px;
            }
        }
    }
    .quick-link {
        bottom: 0;
        left: 50%;
        padding: @space;
        z-index: -1;
        background-color: #fafafa;
        position: absolute;
        user-select: none;
        transform: translateX(90px);
        transition: transform 300ms;
        &:hover {
            background-color: #fff;
            transform: translateX(175px);
        }
        .ivu-icon {
            vertical-align: middle;
        }
    }
    .a {
        width: @size * 1;
        float: left;
        &:hover {
            color: @blue;
            cursor: pointer;
        }
    }
}